import {createElement, findDOMNode, Component} from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Picture from 'rax-picture';
import transition from 'universal-transition';

const defaultModuleData = {
  messHeight: 40,
  messContent: '这是滚动的公告！这是滚动的公告！这是滚动的公告！这是滚动的公告！这是滚动的公告！这是滚动的公告！这是滚动的公告！这是滚动的公告！这是滚动的公告！这是滚动的公告！这是滚动的公告！这是滚动的公告！这是滚动的公告！这是滚动的公告！',
  rowTime: 20,
  messIcon: '//img.alicdn.com/imgextra/i2/3355153118/TB2fABznTTI8KJjSsphXXcFppXa-3355153118.jpg',
};


class MainApp extends Component {
  constructor(props) {
    super(props);
    this.pageUtils = props.pageUtils;
    this.state = {
      mds: props.mds || {},
      gdc: props.gdc || {},
    };
  }

  render() {
    let {
      messIcon = '',
      messHeight = '',
      messContent = '',
      rowTime = '',
    } = this.state.mds.moduleData;

    // 校正数据
    if (!messIcon && !messIcon.length) {
      messIcon = defaultModuleData.messIcon;
    }
    if (!messContent && !messContent.length) {
      messContent = defaultModuleData.messContent;
    }
    messHeight = parseInt(messHeight) || defaultModuleData.messHeight;
    rowTime = parseInt(rowTime) || defaultModuleData.rowTime;

    // props
    const messProps = {
      messHeight,
      messIcon,
      messContent,
      rowTime,
    };

    return <RowMessage {...messProps}/>;
  }
}


const messStyles = {
  iconStyle: {
    // width: 50,
    // height: 50,
    position: 'absolute',
    // left: 10,
    // top: 10,
  },
  noticeBox: {
    width: 690,
    overflow: 'hidden',
  }
};
class RowMessage extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    const { messHeight, messIcon, messContent, rowTime } = this.props;

    const iconProps = {
      source: {
        uri: messIcon,
      },
      style: {
        ...messStyles.iconStyle,
        width: messHeight,
        height: messHeight,
      },
      lazyload: true,
      resizeMode: 'cover',
    };
    const dataProps = {
      text: messContent,
      height: messHeight,
      speed: rowTime,
    };

    return (
      <View style={{backgroundColor: '#ffffff'}}>
        <Picture {...iconProps}/>
        <View style={{
          ...messStyles.noticeBox,
          marginLeft: messHeight + 2,
          height: messHeight,
        }}>
          <Notice {...dataProps}/>
        </View>
      </View>
    );
  }
}
const noticeStyles = {
  wrapper: {
    width: 750,
    // height: 50,
    // backgroundColor: 'green',
    position: 'relative',
    left: 750,
    top: 0,
  },
  boxStyle: {
    width: 700,
    // height: 50,
    position: 'relative',
    left: 750,
    // top: 8,
    overflow: 'hidden',
  },
  textStyle: {
    fontSize: 30,
  },
};
class Notice extends Component {
  constructor(props) {
    super(props);
    this.textWidth = props.text.length * 30;
    this.speed = props.speed * 1000;
    this.imgUrl = props.imgUrl;
  }

  componentDidMount() {
    this.move();
  }

  move(type = 'move') {
    const { textWidth, speed } = this;
    const notice = findDOMNode(this.refs.notice);
    const moveX = type === 'move' ? textWidth + 700 : 0;
    const duration = type === 'move' ? speed : 1;
    setTimeout(() => {
      transition(notice, {
        transform: `translateX(-${moveX}px)`,
      }, {
        timingFunction: 'linear',
        duration,
        // delay: this.delay,
      }, () => {
        if (type === 'move') {
          this.move('back');
        } else {
          this.move();
        }

      });
    }, 0);
  }

  render() {

    const { textWidth } = this;
    const { text, height } = this.props;

    const boxProps = {
      style: {
        ...noticeStyles.boxStyle,
        width: textWidth,
        height,
      },
      ref: 'notice',
    };
    const textProps = {
      style: {
        ...noticeStyles.textStyle,
        width: textWidth,
        lineHeight: height,
        height,
      },
      ref: 'text'
    };

    return (
      <View style={{height: height}}>
        <View {...boxProps}>
          <Text {...textProps}>{text}</Text>
        </View>
      </View>

    );
  }
}

export default MainApp;
